<template>
  <el-dialog title="权限管理" v-model="dialogFormVisible" top="5%" @close="handleClose">
    <div :style="{'height': _PageHeight+100+'px', 'overflow-x': 'scroll'}">
      <el-tree :data="treedata" show-checkbox default-expand-all node-key="_id" :check-strictly="true" :default-checked-keys="treeform" ref="tree" highlight-current :props="defaultProps">
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="false" @click="handleKeep()">确认保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: ['dialogStatus', 'qxid'],
  data() {
    return {
      treedata: [],
      dialogFormVisible: false,
      defaultProps: {
        children: 'children',
        label: 'menu_name'
      },
      formData: [],
      treeform: []
    }
  },
  watch: {
    dialogStatus(newValue) {
      this.dialogFormVisible = newValue
      if (newValue) {
        this.getTree()
      }
    }
  },
  methods: {
    handleClose() {
      this.treeform = []
      this.formData = []

      this.$emit('CB-dialogStatus', false)
    },
    handleKeep() {
      this.formData = this.$refs.tree.getCheckedKeys()
      this.fetch('/userGroup/saveauth', {
        pid: this.qxid,
        rules: this.formData
      }, this.$store.getters.Request_Head, 'POST').then((userData) => {
        if (userData.status.code !== 1001) {
          this.$message.error(userData.data ? userData.data : userData.status.title)
        } else {
          this.$message.success('数据保存成功！')
          this.$emit('CB-dialogStatus', 1)
        }
      }).catch(() => {
        this.$emit('API-ERR');
      })
    },
    getTree() {
      this.fetch('/userGroup/read', {
        pid: this.useri._id,
        _id: this.qxid,
        is_menu: -1
      }, this.$store.getters.Request_Head, 'POST').then((userData) => {
        if (userData.status.code !== 1001) {
          this.$message.error(userData.data ? userData.data : userData.status.title)
        } else {
          this.treedata = userData.data.treeData
          this.treeform = userData.data.treeform
        }
      }).catch(() => {
        this.$emit('API-ERR');
      })
    },
  },
  computed: {
    ...mapState({
      useri: state => state.userinfo.userinfo,
    })
  }
}

</script>
